<template>
  <div>
    <p>const temp0 = 1; --->>> temp0={{ temp0 }}</p>
    <input type="text" v-model="temp0" />{{ temp0 }}
    temp0是非响应式数据，所以这里不会引起改变

    <hr />

    <p>const state0 = ref(temp0);</p>
    <input type="text" v-model="state0" />state0:{{ state0 }}
    state0是响应式数据，所以这里会引起改变

    <hr />
    <p>const temp = { count: 1 }; --->>> temp.count={{ temp.count }}</p>
    <input type="text" v-model="temp.count" />temp.count:{{ temp.count }}
    temp.count是非响应式数据，所以这里不会引起改变
    <hr />
    <p>
      响应式数值ref： const state0 = ref(temp0);不会修改temp0:{{
        temp0
      }}，但是state0一变，关联state0的控件会刷新（页面刷新）
      <button @click="add0">add {{ state0 }}</button>
      <input type="text" v-model="state0" />
    </p>
    <hr />
    <p>
      响应式对象ref： const state1 =
      ref(temp.count);state1改变，不会修改temp.count，但是state1一变，关联state1的控件会刷新（页面刷新）
      <button @click="add1">Add {{ state1 }}</button>
      <input type="text" v-model="state1" />
    </p>
    <hr />
    <p>
      响应式对象toRef：const state2 = toRef(temp,
      "count");state2改变，会修改temp.count，关联state2的控件不会刷新（**页面不会刷新）。
      <button @click="add2">Add {{ state2 }}</button>
      <input type="text" v-model="state2" />
    </p>
    <hr />
    <p>
      let obj = { A: 0 }; // obj.A 普通对象 这种情况会双向绑定A ，但是不刷新界面
      let A2 = toRef(obj, "A"); // 这种情况会双向绑定A ，但是不刷新界面
      A2.value= 1111; console.log(obj.A); let obj = { A: 0 }; 普通对象
      obj.A--->>
      <br />
      <input type="text" v-model="obj.A" />
      <input type="text" v-model="obj.A" />
      <br />
      let A2 = toRef(obj, "A"); 当 A2.value=3; 那么 obj.A也会等于3.
      v-model="A2"->>>但是不会触发页面刷新 A2.value--->>
      <input type="text" v-model="A2" />{{ A2 }}
      <br />
      let objb = { bb: 123 }; obj2.B 普通对象 let B = toRefs(reactive(objb));
      v-model="bb"->>> 这种情况会双向绑定bb ，会触发页面刷新
      <br />
      <input type="text" v-model="bb" />{{ bb }}
    </p>
  </div>
</template>
<script>
// https://www.cnblogs.com/yingliyu/p/14267394.html
import { reactive, ref, toRef, toRefs } from "vue";
export default {
  setup() {
    const temp0 = 1;
    const state0 = ref(temp0); // ref()是对原数据的一个深拷贝，当其值改变时不会影响到原始值；

    const temp = { count: 1 };
    const state1 = ref(temp.count);

    const state2 = toRef(temp, "count"); //toRef()是对原数据的一个引用，当值改变时会影响到原始值；
    state2.value = 22;
    console.log("temp.count-->>" + temp.count);

    const add0 = () => {
      state0.value++;
      console.log("temp0原始值：", temp0); //原始值：1
      console.log("响应式数据对象ref：", state0.value); //响应式数值ref：2
    };
    const add1 = () => {
      state1.value++;
      console.log("原始值：", temp); //原始值：1
      console.log("响应式数据对象ref：", state1.value); //响应式对象ref：2
    };

    const add2 = () => {
      state2.value++;
      console.log("原始值：", temp); // 原始值：2
      console.log("响应式数据对象toRef：", state2.value); //响应式对象toRef：2
    };

    let obj = { A: 123 }; //   obj.A 普通对象 这种情况会双向绑定A ，但是不刷新界面
    let A2 = toRef(obj, "A"); //   这种情况会双向绑定A ，但是不刷新界面
    A2.value = 1111;
    console.log(obj.A);

    // let obj = reactive({ A: 0 });
    // let A2 = toRef(obj, "A");  这种情况会双向绑定A，同时刷新界面

    let objb = { bb: 123 }; //   obj2.B 普通对象 这种情况会双向绑定bb ，刷新界面
    let B = toRefs(reactive(objb));

    return {
      temp0,
      temp,
      state0,
      state1,
      state2,
      add0,
      add1,
      add2,
      obj,
      A2,
      ...B,
    };
  },
};
</script>
